<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>request payload</title>
  <script src="js/jquery.js"></script>
</head>

<body>
  <div id="form_submit">
    <div class="form-group">
      <label>姓名<span class="text-danger">*</span> <small class="text-danger" style="display: none;"></small></label>
      <input type="text" name="姓名" class="form-control" aria-required="true" aria-invalid="false">
    </div>
    <div class="form-group">
      <label>电话<span class="text-danger">*</span> <small class="text-danger"
                         style="display: none;"></small></label>
      <input type="text" name="电话" class="form-control" aria-required="true" aria-invalid="false">
    </div>
    <div class="form-group">
      <label>所在省份<small class="text-danger" style="display: none;"></small></label>
      <select name="所在省份" class="form-control" aria-required="false" aria-invalid="false" id="p">
        <option></option>
      </select>
    </div>
    <div class="form-group">
      <label>所在城市<small class="text-danger" style="display: none;"></small></label>
      <select name="所在城市" class="form-control" aria-required="false" aria-invalid="false" id="c">
       <option></option>
      </select>
    </div>
    <div class="form-group">
      <label>所在中心<small class="text-danger" style="display: none;"></small></label>
      <select name="所在中心" class="form-control" aria-required="false" aria-invalid="false" id="d">
        <option></option>
      </select>
    </div>
    <div class="text-center">
      <button type="button" class="form-btn" id="submit">提 交</button>
    </div>
  </div>
  <script>
    var region = [{
      p: '浙江省',
      c: [{
        v: '杭州市',
        c: ['杭州水印城校区', '杭州昆仑公馆校区', '杭州北宸之光校区', '杭州嘉绿名苑校区', '杭州中粮方圆府校区', '杭州九堡校区', '杭州红苹果校区', '杭州武林校区', '杭州昆仑天籁校区',
        '杭州恒生科技园校区', '杭州星光天地校区', '杭州西城广场校区']
      },{
        v: '绍兴市',
        c: ['绍兴柯桥校区', '绍兴金帝银泰城校区']
      },{
        v: '宁波市',
        c: ['宁波鼓楼校区', '宁波江东校区']
      },{
        v: '金华',
        c: ['金华开隆商厦校区']
      },{
        v: '温州',
        c: ['温州南浦校区', '温州欧洲城校区', '温州汤家桥校区']
      }]
    }, {
      p: '上海市',
      c: [{
        v: '上海市',
        c: ['上海静安校区']
      }]
    }];
    var state = {
      pidx: -1,
      cidx: -1
    }


    $.each(region, function(index, value) {
      $('#p').append('<option value="' + value.p + '">' + value.p + '</option>');
    });

    $('#p').change(function() {
      var p = $('#p').val();
      $.each(region, function(index, value) {

        if (value.p == p) {
          state.pidx = index;
          state.cidx = 0;
          var html = '<option></option>';
          $.each(value.c, function(idx, val) {
            html +='<option value="'+ val.v +'">'+ val.v +'</option>';
          })
          $('#c').html(html);
        }
      })

      $('#d').html('<option></option>');

    })


    $('#c').change(function() {
      var c = $('#c').val();
      $.each(region[state.pidx].c, function (index, value){
        if (value.v == c) {
          state.cidx = index;
          var html = ' <option></option>';
          $.each(value.c, function(idx, val){
           html +='<option value="'+ val +'">'+ val+'</option>';
          })
          $('#d').html(html);
        }
      })

    })

    $('#submit').on('click', function() {
      var data = {
        "姓名": $('input[name="姓名"]').val(),
        "电话": $('input[name="电话"]').val(),
        "所在省份": $('select[name="所在省份"]').val(),
        "所在城市": $('select[name="所在城市"]').val(),
        "所在中心": $('select[name="所在中心"]').val()
      }
      $.ajax({
        url: '/api/ss.form/1/3',
        type: 'post',
        dataType: 'json',
        data: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        },
        success: function(res) {
          console.log(res);
          if (res.id) {
            $('#form_submit').html('<div class="text-center" style="margin-top: 100px;"><p class="lead mt-3 text-nowrap text-primary">表单提交成功！</p></div>');
          }
        },
        error: function(e) {
          $('#form_submit').html('<div class="text-center" style="margin-top: 100px"><p class="lead mt-3 text-nowrap text-danger">提交失败</p></div>');
        }
      });
    })
  </script>
</body>

</html>